<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>S.IO Demo</title>


</head>
<body style="padding: 20px">

<button id="get">GET</button>
<button id="post">POST</button>
<button id="json">Json</button>
<button id="jsonp">JSONP</button>
<button id="sync">同步获取数据</button>

<div id="console" style="margin: 20px; padding: 10px; border: 1px solid #ccc"></div>

<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("node,io,json", function (S, Node, IO, Json) {
        var $ = Node.all;

        var _log = S.log,
                c = $('#console');
        var log = function () {
            c.html(arguments[0]);
            _log.apply(S, arguments);
        };


        // 全局事件
        IO.on('start', function () {
            $('#console').html('<p><img src="http://img04.taobaocdn.com/tps/i4/T1CntDXh8hXXXXXXXX-32-32.gif" /></p>');
        });

        IO.on('complete', function () {
            var p = $('#console p');
            if (p) {
                p.remove();
            }
        });

        //普通 get 请求
        $('#get').on('click', function () {
            IO.get('' + '../tests/data/interface.jss?t=get', function (data) {
                log('GET ' + data);
            });
        });

        //普通 post 请求
        $('#post').on('click', function () {
            IO.post('../tests/data/interface.jss?t=post', {
                type: 'post',
                name: 'jayli',
                company: 'cn.yahoo.com',
                country: 'china'
            }, function (o) {
                log('POST ' + o);
            });
        });

        // Json
        $('#json').on('click', function () {
            IO.get('../tests/data/interface.jss?t=get', function (data) {
                log('json ' + Json.stringify(data));
            }, 'json');

        });

        // JSONP
        $('#jsonp').on('click', function () {

            IO.jsonp('http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%2Cdescription%20from%20rss%20where%20url%3D%22http%3A%2F%2Fued.taobao.com%2Fblog%2Ffeed%2F%22&format=json&diagnostics=true',
                    function (data) {
                        log(Json.stringify(data));
                    }
            );
        });

        // 同步
        $('#sync').on('click', function () {
            var str = IO({
                type: 'get',
                url: '../tests/data/interface.jss?t=get',
                async: false,
                complete: function (data) {
                    log(data);
                }
            }).responseText;
            log('ASYN block the thread :' + str);
        });
    });
</script>
</body>
</html>
